import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image, Input } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import './index.less'
import zhangdan from '../../img/zhangdan.png'
import tixian from '../../img/tixian.png'
import invitation from '../../img/invitation.png'
import totalNumber from '../../img/totalNumber.png'
import cumulative from '../../img/cumulative.png'
import otherRightArrow from '../../img/otherRightArrow.png'

export default class members extends Component {

  config = {
    navigationBarTitleText: '会员中心'
  }

  handleShare(id){
    switch (id) {
      case 2:
        Taro.navigateTo({
          url:'../share/index'
        })
        break;
    }
  }
  handleBalance(){
    Taro.navigateTo({
      url:'../balance/index'
    })
  }

  // componentWillMount () { }

  // componentDidMount () { }

  // componentWillUnmount () { }

  // componentDidShow () { }

  // componentDidHide () { }

  render () {
    const data = {
      topbanner:'http://iph.href.lu/300x200?text=占位',
      goods:[
        {
          id:1,
          img:'http://iph.href.lu/300x200?text=占位',
          name:'阿芙精油之吻润色唇膏3.5G弗兰德斯红罂粟007(口红 持久滋润)',
          price:199
        },{
          id:2,
          img:'http://iph.href.lu/300x200?text=占位',
          name:'阿芙精油之吻润色唇膏3.5G弗兰德斯红罂粟007(口红 持久滋润)',
          price:199
        }
      ],
      lists:[
        {
          id:1,
          icon:zhangdan,
          text:'账单'
        },{
          id:2,
          icon:invitation,
          text:'邀请赚钱'
        },{
          id:3,
          icon:tixian,
          text:'提现'
        }
      ],
      balance:13,
      totalNumber:15,
    }
    return (
      <View>
        {false?
          <View>
            <Image src={data.topbanner} className='banner' />
            <View className='bottom-box'>
              {data.goods.map(item=>(
                <View key={item.id} className='good-box'>
                  <Image src={item.img} className='left-img' />
                  <View className='good-box-first'>
                    <Text className='good-box-name'>{item.name}</Text>
                    <Text className='good-box-price'>套餐价：{item.price}</Text>
                  </View>
                  <View className='good-box-last'>
                    <Text className='buy'>购买</Text>
                  </View>
                </View>
              ))}
            </View>
          </View>
        :
        <View>
          {/**上部三个选项按钮 */}
          <View className='lists-box'>
            {data.lists.map(item=>(
              <View key={item.id} className='list-box' onClick={this.handleShare.bind(this,item.id)}>
                <Image src={item.icon} className='icon' />
                <Text className='list-box-text'>{item.text}</Text>
              </View> 
            ))}
          </View>
          {/**余额 */}
          <View className='balance-box' onClick={this.handleBalance}>
            <Text className='balance'>余额：￥{data.balance}</Text>
          </View>
          {/**总用户 */}
          <View className='total-number-box'>
            <View className='total-left-box'>
              <Image src={totalNumber} className='totalNumber' />
              <Text className='total-left-text'>总用户</Text>
            </View>
            <Text className='total-number-box-text'>{data.totalNumber}</Text>
          </View> 
          {/**累计推荐人 */}
          <View className='cumulative-box'>
            <View className='cumulative-left-box'>
              <Image src={cumulative} className='cumulative' />
              <Text className='cumulative-text'>累计推荐人</Text>
            </View>
            <Image src={otherRightArrow} className='otherRightArrow' />
          </View> 
        </View>  
        }
      </View>
    )
  }
}

